<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>诗篇在线建站系统登录</title>
<meta name="description" content="面向对象，基于freemarker的模板，完全在网页中进行">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- 
event (rollup includes event-base, event-delegate, event-synthetic, event-mousewheel, event-mouseenter, event-key, event-focus, event-resize, event-hover, event-outside)
event-base-ie
history (rollup includes history-base, history-hash, history-hash-ie, history-html5)
history-hash-ie
io (rollup includes io-base, io-xdr, io-form, io-upload-iframe, io-queue)
json (rollup includes json-parse, json-stringify)
node (rollup includes node-base, node-event-delegate, node-pluginhost, node-screen, node-style)
selector
selector-css2
selector-css3
selector-native
-->
<script type="text/javascript" src="/yuicombo?prefix=/yui/3.4.1/build/&postfix=-min.js&yui-base/yui-base&oop/oop&features/features&dom-core/dom-core&dom-base/dom-base&selector-native/selector-native&selector/selector&event-custom-base/event-custom-base&node-core/node-core&node-base/node-base&event-base/event-base&event-base-ie/event-base-ie&event-delegate/event-delegate&event-custom-complex/event-custom-complex&event-synthetic/event-synthetic&event-mousewheel/event-mousewheel&event-mouseenter/event-mouseenter&event-key/event-key&event-focus/event-focus&event-resize/event-resize&event-hover/event-hover&event-outside/event-outside&history-base/history-base&history-html5/history-html5&yui-later/yui-later&history-hash/history-hash&history-hash-ie/history-hash-ie&json-parse/json-parse&json-stringify/json-stringify&node-event-delegate/node-event-delegate&pluginhost-base/pluginhost-base&pluginhost-config/pluginhost-config&node-pluginhost/node-pluginhost&dom-style/dom-style&dom-screen/dom-screen&node-screen/node-screen&node-style/node-style&selector-css2/selector-css2&selector-css3/selector-css3&querystring-stringify-simple/querystring-stringify-simple&io-base/io-base&datatype-xml-parse/datatype-xml-parse&io-xdr/io-xdr&io-form/io-form&io-upload-iframe/io-upload-iframe&queue-promote/queue-promote&io-queue/io-queue"></script>

<style type="text/css">
html,body,div,h1,h2,h3,h4,h5,h6,p,img,dl,dt,dd,ol,ul,li,table,tr,td,form,object,embed,article,aside,canvas,command,details,figcaption,figure,footer,group,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,audio,video
	{
	margin: 0;
	padding: 0;
	border: 0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
	{
	display: block;
}

html {
	font: 81.25% arial, helvetica, sans-serif;
	background: #fff;
	color: #333;
	line-height: 1;
	direction: ltr;
}

a {
	color: #15c;
	text-decoration: none;
}

a:active {
	color: #d14836;
}

a:hover {
	text-decoration: underline;
}

h1,h2,h3,h4,h5,h6 {
	color: #222;
	font-size: 1.54em;
	font-weight: normal;
	line-height: 24px;
	margin: 0 0 .46em;
}

p {
	line-height: 17px;
	margin: 0 0 1em;
}

ol,ul {
	list-style: none;
	line-height: 17px;
	margin: 0 0 1em;
}

li {
	margin: 0 0 .5em;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

strong {
	color: #222;
}

button,input,select,textarea {
	font-family: inherit;
	font-size: inherit;
}

button::-moz-focus-inner,input::-moz-focus-inner {
	border: 0;
}
</style>
<style type="text/css">
html,body {
	position: absolute;
	height: 100%;
	min-width: 100%;
}

.wrapper {
	position: relative;
	min-height: 100%;
}

.content {
	margin: 0 auto;
	width: 650px;
	padding: 0 44px;
}

.google-header-bar {
	height: 71px;
	background: #f5f5f5;
	border-bottom: 1px solid #e5e5e5;
	overflow: hidden;
}

.header .logo {
	margin: 18px 0 0 -1px;
	float: left;
}

.header .signin,.header .signup {
	margin: 28px 0 0;
	float: right;
	font-weight: bold;
}

.header .signup-button {
	margin: 22px 0 0;
	float: right;
}

.header .signup-button a {
	position: relative;
	top: -1px;
	margin: 0 0 0 1em;
}

.main {
	padding-top: 23px;
	padding-bottom: 125px;
}

.main h1:first-child {
	margin: 0 0 .92em;
}

.google-footer-bar {
	position: absolute;
	bottom: 0;
	height: 35px;
	width: 100%;
	border-top: 1px solid #ebebeb;
	overflow: hidden;
}

.footer {
	padding-top: 9px;
	font-size: .85em;
	white-space: nowrap;
	line-height: 0;
}

.footer ul {
	color: #999;
	float: left;
	max-width: 80%;
}

.footer ul li {
	display: inline;
	padding: 0 1.5em 0 0;
}

.footer form {
	text-align: right;
}

.footer form .lang-chooser {
	max-width: 20%;
}

.announce-bar {
	position: absolute;
	bottom: 35px;
	height: 33px;
	z-index: 2;
	width: 100%;
	background: #f9edbe;
	border-top: 1px solid #efe1ac;
	border-bottom: 1px solid #efe1ac;
	overflow: hidden;
}

.announce-bar .message {
	font-size: .85em;
	line-height: 33px;
	margin: 0;
}

.announce-bar a {
	margin: 0 0 0 1em;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: '.';
	clear: both;
	height: 0;
}

* html .clearfix {
	zoom: 1;
}

*:first-child+html .clearfix {
	zoom: 1;
}
</style>

<style type="text/css">
input[type=email],input[type=password],input[type=text],input[type=url]
	{
	display: inline-block;
	height: 29px;
	margin: 0;
	padding-left: 8px;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-top: 1px solid #c0c0c0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
}

input[type=email]:hover,input[type=password]:hover,input[type=text]:hover,input[type=url]:hover
	{
	border: 1px solid #b9b9b9;
	border-top: 1px solid #a0a0a0;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

input[type=email]:focus,input[type=password]:focus,input[type=text]:focus,input[type=url]:focus
	{
	outline: none;
	border: 1px solid #4d90fe;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

input[type=email][disabled=disabled],input[type=password][disabled=disabled],input[type=text][disabled=disabled],input[type=url][disabled=disabled]
	{
	border: 1px solid #e5e5e5;
	background: #f5f5f5;
}

input[type=email][disabled=disabled]:hover,input[type=password][disabled=disabled]:hover,input[type=text][disabled=disabled]:hover,input[type=url][disabled=disabled]:hover
	{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

input[type=checkbox],input[type=radio] {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	margin: 0;
	cursor: pointer;
	vertical-align: bottom;
	background: #fff;
	border: 1px solid #dcdcdc;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}

input[type=checkbox]:active,input[type=radio]:active {
	border-color: #c6c6c6;
	background: #ebebeb;
}

input[type=checkbox]:hover {
	border-color: #c6c6c6;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

input[type=radio] {
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	width: 15px;
	height: 15px;
}

input[type=checkbox]:checked,input[type=radio]:checked {
	background: #fff;
}

input[type=radio]:checked::after {
	content: '';
	display: block;
	position: relative;
	top: 3px;
	left: 3px;
	width: 7px;
	height: 7px;
	background: #666;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
}

input[type=checkbox]:checked::after {
/*	content: url(//ssl.gstatic.com/ui/v1/menu/checkmark.png);*/
	display: block;
	position: absolute;
	top: -6px;
	left: -5px;
}

input[type=checkbox]:focus {
	outline: none;
	border-color: #4d90fe;
}

.g-button {
	display: inline-block;
	min-width: 54px;
	text-align: center;
	color: #555;
	font-size: 11px;
	font-weight: bold;
	height: 27px;
	padding: 0 8px;
	line-height: 27px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-transition: all 0.218s;
	-moz-transition: all 0.218s;
	-ms-transition: all 0.218s;
	-o-transition: all 0.218s;
	transition: all 0.218s;
	border: 1px solid #dcdcdc;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background-color: #f5f5f5;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5),
		to(#f1f1f1) );
	background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
	background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
	background-image: -ms-linear-gradient(top, #f5f5f5, #f1f1f1);
	background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
	background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: default;
}

*+html .g-button {
	min-width: 70px;
}

button.g-button,input[type=submit].g-button {
	height: 29px;
	line-height: 29px;
	vertical-align: bottom;
	margin: 0;
}

*+html button.g-button,*+html input[type=submit].g-button {
	overflow: visible;
}

.g-button:hover {
	border: 1px solid #c6c6c6;
	color: #333;
	text-decoration: none;
	-webkit-transition: all 0.0s;
	-moz-transition: all 0.0s;
	-ms-transition: all 0.0s;
	-o-transition: all 0.0s;
	transition: all 0.0s;
	background-color: #f8f8f8;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8),
		to(#f1f1f1) );
	background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
	background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1);
	background-image: -ms-linear-gradient(top, #f8f8f8, #f1f1f1);
	background-image: -o-linear-gradient(top, #f8f8f8, #f1f1f1);
	background-image: linear-gradient(top, #f8f8f8, #f1f1f1);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.g-button:active {
	background-color: #f6f6f6;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6),
		to(#f1f1f1) );
	background-image: -webkit-linear-gradient(top, #f6f6f6, #f1f1f1);
	background-image: -moz-linear-gradient(top, #f6f6f6, #f1f1f1);
	background-image: -ms-linear-gradient(top, #f6f6f6, #f1f1f1);
	background-image: -o-linear-gradient(top, #f6f6f6, #f1f1f1);
	background-image: linear-gradient(top, #f6f6f6, #f1f1f1);
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.g-button:visited {
	color: #666;
}

.g-button-submit {
	border: 1px solid #3079ed;
	color: #fff;
	text-shadow: 0 1px rgba(0, 0, 0, 0.1);
	background-color: #4d90fe;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#4d90fe),
		to(#4787ed) );
	background-image: -webkit-linear-gradient(top, #4d90fe, #4787ed);
	background-image: -moz-linear-gradient(top, #4d90fe, #4787ed);
	background-image: -ms-linear-gradient(top, #4d90fe, #4787ed);
	background-image: -o-linear-gradient(top, #4d90fe, #4787ed);
	background-image: linear-gradient(top, #4d90fe, #4787ed);
}

.g-button-submit:hover {
	border: 1px solid #2f5bb7;
	color: #fff;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	background-color: #357ae8;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#4d90fe),
		to(#357ae8) );
	background-image: -webkit-linear-gradient(top, #4d90fe, #357ae8);
	background-image: -moz-linear-gradient(top, #4d90fe, #357ae8);
	background-image: -ms-linear-gradient(top, #4d90fe, #357ae8);
	background-image: -o-linear-gradient(top, #4d90fe, #357ae8);
	background-image: linear-gradient(top, #4d90fe, #357ae8);
}

.g-button-submit:active {
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.g-button-share {
	border: 1px solid #29691d;
	color: #fff;
	text-shadow: 0 1px rgba(0, 0, 0, 0.1);
	background-color: #3d9400;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3d9400),
		to(#398a00) );
	background-image: -webkit-linear-gradient(top, #3d9400, #398a00);
	background-image: -moz-linear-gradient(top, #3d9400, #398a00);
	background-image: -ms-linear-gradient(top, #3d9400, #398a00);
	background-image: -o-linear-gradient(top, #3d9400, #398a00);
	background-image: linear-gradient(top, #3d9400, #398a00);
}

.g-button-share:hover {
	border: 1px solid #2d6200;
	color: #fff;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	background-color: #368200;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3d9400),
		to(#368200) );
	background-image: -webkit-linear-gradient(top, #3d9400, #368200);
	background-image: -moz-linear-gradient(top, #3d9400, #368200);
	background-image: -ms-linear-gradient(top, #3d9400, #368200);
	background-image: -o-linear-gradient(top, #3d9400, #368200);
	background-image: linear-gradient(top, #3d9400, #368200);
}

.g-button-share:active {
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.g-button-red {
	border: 1px solid transparent;
	color: #fff;
	text-shadow: 0 1px rgba(0, 0, 0, 0.1);
	text-transform: uppercase;
	background-color: #d14836;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#dd4b39),
		to(#d14836) );
	background-image: -webkit-linear-gradient(top, #dd4b39, #d14836);
	background-image: -moz-linear-gradient(top, #dd4b39, #d14836);
	background-image: -ms-linear-gradient(top, #dd4b39, #d14836);
	background-image: -o-linear-gradient(top, #dd4b39, #d14836);
	background-image: linear-gradient(top, #dd4b39, #d14836);
}

.g-button-red:hover {
	border: 1px solid #b0281a;
	color: #fff;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	background-color: #c53727;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#dd4b39),
		to(#c53727) );
	background-image: -webkit-linear-gradient(top, #dd4b39, #c53727);
	background-image: -moz-linear-gradient(top, #dd4b39, #c53727);
	background-image: -ms-linear-gradient(top, #dd4b39, #c53727);
	background-image: -o-linear-gradient(top, #dd4b39, #c53727);
	background-image: linear-gradient(top, #dd4b39, #c53727);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	-ms-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.g-button-red:active {
	border: 1px solid #992a1b;
	background-color: #b0281a;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#dd4b39),
		to(#b0281a) );
	background-image: -webkit-linear-gradient(top, #dd4b39, #b0281a);
	background-image: -moz-linear-gradient(top, #dd4b39, #b0281a);
	background-image: -ms-linear-gradient(top, #dd4b39, #b0281a);
	background-image: -o-linear-gradient(top, #dd4b39, #b0281a);
	background-image: linear-gradient(top, #dd4b39, #b0281a);
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.g-button-white {
	border: 1px solid #dcdcdc;
	color: #666;
	background: #fff;
}

.g-button-white:hover {
	border: 1px solid #c6c6c6;
	color: #333;
	background: #fff;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.g-button-white:active {
	background: #fff;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.g-button-red:visited,.g-button-share:visited,.g-button-submit:visited {
	color: #fff;
}

.g-button-submit:focus,.g-button-share:focus,.g-button-red:focus {
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	-moz-box-shadow: inset 0 0 0 1px #fff;
	box-shadow: inset 0 0 0 1px #fff;
}

.g-button-share:focus {
	border-color: #29691d;
}

.g-button-red:focus {
	border-color: #d14836;
}

.g-button-submit:focus:hover,.g-button-share:focus:hover,.g-button-red:focus:hover
	{
	-webkit-box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.1);
}

.g-button img {
	display: inline-block;
	margin: -3px 0 0;
	opacity: .55;
	vertical-align: middle;
}

*+html .g-button img {
	margin: 4px 0 0;
}

.g-button:hover img {
	opacity: .72;
}

.g-button:active img {
	opacity: 1;
}

.errormsg {
	margin: .5em 0 0;
	display: none;
	color: #dd4b39;
	line-height: 17px;
}

input[type=email].form-error,input[type=password].form-error,input[type=text].form-error,input[type=url].form-error
	{
	border: 1px solid #dd4b39;
}

.help-link {
	background: #dd4b39;
	padding: 0 5px;
	color: #fff;
	font-weight: bold;
	display: inline-block;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	text-decoration: none;
	position: relative;
	top: 0px;
}

.help-link:visited {
	color: #fff;
}

.help-link:hover {
	opacity: .7;
	color: #fff;
}
</style>
<style type="text/css">
.content {
	width: auto;
	max-width: 1000px;
	min-width: 780px;
}

.product-info {
	margin: 0 385px 0 0;
}

.product-info h3 {
	font-size: 1.23em;
	font-weight: normal;
}

.product-info a:visited {
	color: #61c;
}

.product-info .g-button:visited {
	color: #666;
}

.sign-in {
	width: 335px;
	float: right;
}

.signin-box,.accountchooser-box {
	margin: 12px 0 0;
	padding: 20px 25px 15px;
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
}

.product-headers {
	margin: 0 0 1.5em;
}

.product-headers h1 {
	color: #dd4b39;
	font-size: 25px;
	margin: 0 !important;
}

.product-headers h2 {
	font-size: 16px;
	margin: .4em 0 0;
}

.features {
	overflow: hidden;
	margin: 2em 0 0;
}

.features li {
	margin: 3px 0 2em;
}

.features img {
	float: left;
	margin: -3px 0 0;
}

.features p {
	margin: 0 0 0 68px;
}

.features .title {
	font-size: 16px;
	margin-bottom: .3em;
}

.features.no-icon p {
	margin: 0;
}

.features .small-title {
	font-size: 1em;
	font-weight: bold;
}

.notification-bar {
	background: #f9edbe;
	padding: 8px;
}
</style>
<style type="text/css">
.signin-box h2 {
	font-size: 16px;
	line-height: 17px;
	height: 16px;
	margin: 0 0 1.2em;
	position: relative;
}

.signin-box h2 strong {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 1px;
	height: 19px;
	width: 52px;
/*	background: transparent  url(//ssl.gstatic.com/accounts/ui/google-signin-flat.png) no-repeat;*/
}

.signin-box label {
	display: block;
	margin: 0 0 1.5em;
}

.signin-box input[type=text],.signin-box input[type=password] {
	width: 100%;
	height: 32px;
	font-size: 15px;
}

.signin-box .email-label,.signin-box .passwd-label {
	font-weight: bold;
	margin: 0 0 .5em;
	display: block;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.signin-box .reauth {
	display: inline-block;
	font-size: 15px;
	height: 29px;
	line-height: 29px;
	margin: 0;
}

.signin-box label.remember {
	display: inline-block;
	vertical-align: top;
	margin: 9px 0 0;
}

.signin-box .remember-label {
	font-weight: normal;
	color: #666;
	line-height: 0;
	padding: 0 0 0 .4em;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.signin-box input[type=submit] {
	margin: 0 1.5em 1.2em 0;
	height: 32px;
	font-size: 13px;
}

.signin-box ul {
	margin: 0;
}

.signin-box .training-msg {
	padding: .5em 8px;
	background: #f9edbe;
}

.signin-box .training-msg p {
	margin: 0 0 .5em;
}
</style>
<style type="text/css">
.mail ul.mail-links {
	list-style: none;
	margin: 0;
	overflow: hidden;
}

.mail ul.mail-links li {
	float: left;
	margin: 0 20px 0 0;
}

.third-login a{
	margin-left: 5px;
}
#captchaImg{
	margin-right: 15px;
	margin-bottom: 10px;
}
</style>
</head>
<body>
	<div class="wrapper">
		<div class="google-header-bar">

			<div class="header content clearfix">
				<!-- 
				<img class="logo"	src="//ssl.gstatic.com/images/logos/google_logo_41.png"	alt="诗篇在线建站系统"/>
				 -->
				 <h1 class="logo">诗篇在线建站系统</h1>
				<span class="signup-button"> 第一次使用？ <a id="link-signup" class="g-button g-button-red"
					href="/signup.html"> 创建帐户 </a> </span>
			</div>
		</div>

		<div class="main content clearfix">
			<div class="sign-in">
				<div class="signin-box">
					<h2>
						登录 <strong></strong>
					</h2>
					<form id="loginform" action="/notrpclogin" method="post">
						<input type="hidden" name="_bianmachecker" value="我是utf-8"></input>
						<input type="hidden" name="_loginextratask" value=""></input>
						
						<label>
							<strong class="email-label">用户名</strong> <input type="text"
							name="username" id="username" value="">
							<span role="alert" class="errormsg" id="errormsg_0_username">
  								请输入您的用户名或电子邮件地址或手机号码。
  							</span>
							 </label>
						<label>
							<strong class="passwd-label">密码</strong> <input type="password"
							name="password" id="password">
							<span role="alert" class="errormsg" id="errormsg_0_password">
  								您输入的用户名或者密码错误！
  							</span>							
						 </label>
						<label>
							<strong class="passwd-label">验证码</strong> <input type="text"
							name="answer" id="answer">
							<span role="alert" class="errormsg" id="errormsg_0_answer">
  								请输入正确的验证码！
  							</span>								
							</label>
						<table>
							<tr>
								<td><div id="captchaImgC"></div></td>
								<td><a href="#" id="refreshCaptcha">换一个图片</a></td>
							</tr>
						</table>
						<input	type="submit" class="g-button g-button-submit" name="signIn"
							id="signIn" value="登录">
						 <label class="remember">
							<input type="checkbox" name="_persistedLogin"
							id="persistedLogin" value="yes"> <strong
							class="remember-label"> 保持登录状态 </strong> </label>
					</form>
					<p>第三方登录：<a href="/openid.html" id="link-openid">openid,google,yahoo,QQ</a></p>
					<p>测试帐号：demo，密码：demo</p>
					<ul>
						<!-- <li><a id="link-forgot-passwd"	href="#" target="_top"> 无法访问您的帐户吗？ </a></li> -->
					</ul>
				</div>
			</div>
			<div class="product-info mail">
				<p>诗篇建站系统的理念是：面向对象的数据 + 模板，摆脱束缚，自由的开发网站。具有以下特点：</p>
				<ul class="features">
					<li>
					<!--
						<img src="//www.google.com/images/icons/feature/filing_cabinet-g42.png"	alt="">
					 -->
						<p class="title">非常简单</p>
						<p>
							相当于面向对象版的asp，只不过模板变成了freemarker。
						</p></li>
					<li>
						<p class="title">通用化的插件</p>
						<p>我们开发了通用的投票、评论、计数、自定义表单等功能。</p></li>
					<li>
						<p class="title">没有部署过程</p>
						<p>
							你不需要了解操作系统，数据库，在我们提供的对象内发挥想象力即可。
						</p></li>
				</ul>
				<!-- 
				<ul class="mail-links">
					<li><a href="#">关于诗篇在线建站系统</a>
					</li>
					<li><a href="#">创建新的帐号</a>
					</li>
				</ul>
				 -->
			</div>
			<div id="cc_iframe_parent"></div>
		</div>
		<div class="google-footer-bar">
			<div class="footer content clearfix">
				<ul>
					<li>© 2011 奉化市诗篇网络科技有限公司</li>
				</ul>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	YUI({bootstrap:false}).use('*',function(Y){
		var usernameNode = Y.one('#username');
		var passwordNode = Y.one('#password');
		var answerNode = Y.one('#answer');
		answerNode.set('value','');
		var cc = Y.one('#captchaImgC');
		cc.setContent('<img src="' + '/simpleImg?' + Math.random() + '" id="captchaImg"/>');
		var captchaImg = Y.one('#captchaImg');
		var history = new Y.HistoryHash();
		var isDebug = false;
		if(window.location.href.indexOf("127.0.0.1") != -1)isDebug = true;
		
		var next = history.get('next'); 
		var nextUrl = "/FirstGwt.html";
		if(next == 'fhtrade'){
			nextUrl = "/Fhtrade.html";
		}else if(next == 'webtool'){
			nextUrl = "/Webtool.html";
		}
		if(isDebug){
			nextUrl += "?gwt.codesvr=127.0.0.1:9997";
		}
		
		var linkSignup = Y.one('#link-signup');
		var signuphref = linkSignup.get('href') + '#next='+ history.get('next');
		if(isDebug)signuphref += '&debug=true';
		linkSignup.set('href',signuphref);
		
		var linkOpenid = Y.one('#link-openid');
		var linkOpenidHref = linkOpenid.get('href') + '#next='+ history.get('next');
		if(isDebug)linkOpenidHref += '&debug=true';
		linkOpenid.set('href',linkOpenidHref);
		
		(function(){
			var tH = {
					success: function(id, o, args) {
								var res = Y.JSON.parse(o.responseText);
								var status = res.response.status;
								var data = res.response.data;
								if(status == 0){
									   if(Y.Lang.isArray(data) && data.length == 1){
										   window.location.href=nextUrl;
									   }
								}else{
									;
								}
							 },
					failure: function(id, o, args) {
							  Y.log(o);
							  alert("发生未知故障！");
							 }
				};
			
			var cfg = {
					method:'GET',
					on: {
						success: tH.success,
						failure: tH.failure
					},
					context: tH
				};
			Y.io('/notrpclogin?_loginstatusdetect=true', cfg);
		})();
		
		
		Y.log(history.get('next'));
		var hideAllError = function(){
        	usernameNode.removeClass('form-error');
        	passwordNode.removeClass('form-error');
        	answerNode.removeClass('form-error');
        	showhideerror('errormsg_0_username',false);
        	showhideerror('errormsg_0_password',false);
        	showhideerror('errormsg_0_answer',false);
		};
		var showhideerror = function(name,show){
			if(show){
				if("username" == name){
					usernameNode.addClass('form-error');
					Y.one('#errormsg_0_username').setStyle('display','block');
					usernameNode.focus();
				}else if("password" == name){
					passwordNode.addClass('form-error');
					Y.one('#errormsg_0_password').setStyle('display','block');
					passwordNode.focus();
				}else if("answer" == name){
					answerNode.addClass('form-error');
					Y.one('#errormsg_0_answer').setStyle('display','block');
					answerNode.focus();
				}
			}else{
				if("username" == name){
					usernameNode.removeClass('form-error');
					Y.one('#errormsg_0_username').setStyle('display','none');
				}else if("password" == name){
					passwordNode.removeClass('form-error');
					Y.one('#errormsg_0_password').setStyle('display','none');
				}else if("answer" == name){
					answerNode.removeClass('form-error');
					Y.one('#errormsg_0_answer').setStyle('display','none');
				}
			}
		};
		usernameNode.focus();
		answerNode.set('value','');
		Y.on('click',function(e){
			e.preventDefault();
			captchaImg.set('src','/simpleImg?' + Math.random());
		},'#refreshCaptcha');
	    var tH = {
	            processResult: function(res, args) {
	            	hideAllError();
	            	if(res.status == 0){
	            		window.location.href=nextUrl;
	            	}else{
	            		var ecode;
	            		if(Y.Lang.isArray(res.data)){
	            			ecode = res.data[0];
	            		}else{
	            			ecode = res.data;
	            		}
	            		if(ecode.code == -11){//验证码错误不需要刷新验证码
	            			showhideerror("answer",true);
	            		}else if(ecode.code == -303){
	            			showhideerror("password",true);
	            			answerNode.set('value','');
	            			captchaImg.set('src','/simpleImg?' + Math.random());
	            		}
	            	}
	            },
	            start: function(id, args) {},
	            complete: function(id, o, args) {},
	            success: function(id, o, args) {
	            	var res = Y.JSON.parse(o.responseText);
	            	this.processResult(res.response);
	            },
	            failure: function(id, o, args) {
	            	window.alert("发生未知错误！");
	            },
	            end: function(id, args) {}
	        };
        /* configuration object for transactions */
        var cfg = {
        	method:'POST',
        	data:'',
            on: {
                start: tH.start,
                complete: tH.complete,
                success: tH.success,
                failure: tH.failure,
                end: tH.end
            },
            context: tH,
            form:{id:'loginform'},
            headers: {},
            arguments: {}
        };
        var formnode = Y.one('#loginform');
        formnode.on('submit',function(e){
        	e.preventDefault();
        	if(usernameNode.get('value').length < 2){
				showhideerror("username",true);
        		return;
        	}else{
        		showhideerror("username",false);
        	}
        	if(passwordNode.get('value').length < 3){
        		showhideerror("password",true);
        		return;
        	}else{
        		showhideerror("password",false);
        	}
        	
        	if(answerNode.get('value').length != 5){
        		showhideerror("answer",true);
        		return;
        	}else{
        		showhideerror("answer",false);
        	}
        	Y.io('/notrpclogin', cfg);
        });
	});
	</script>
</body>
</html>
